<template>
  <el-dialog
    :visible="visible"
    :before-close="handleClose"
    :close="handleClose"
    :show-close="true"
    class="small-common-dialog-size stop-dialog"
  >
    <Title title="停止采集" style="margin-bottom:24px" />
    <div>确认后该条微博的数据不再更新，出现未达标情况也不进行通知提醒</div>
    <div class="center">
      <el-button
        :disabled="loading"
        :loading="loading"
        type="primary"
        size="small"
        @click="handleSubmit"
      >
        确定
      </el-button>
      <el-button
        type="info"
        size="small"
        class="cancel-btn-style"
        @click="handleClose"
      >取消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import Title from '@/components/Title';
export default {
  components: {
    Title
  },
  data() {
    return {
      id: null,
      visible: false,
      loading: false
    };
  },
  methods: {
    openDialog(id) {
      this.id = id;
      this.visible = true;
    },
    cancelLoading() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    handleClose() {
      this.visible = false;
      this.cancelLoading();
    },
    handleSubmit() {
      this.loading = true;
      this.$emit('submit', this.id);
    }
  }
};
</script>

<style lang="scss" scoped>
.stop-dialog {
  .center{
    display: flex;
    justify-content: center;
  }
}
</style>
